<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <script src="https://unpkg.com/vue@next"></script>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-plus/lib/index.full.js"></script>
    <title>Element Plus demo</title>
  </head>
  <body>
    <div id="app">
      <el-button>{{ get1(2) }}</el-button>
	  <el-table
	      :data="tableData"
	      style="width: 100%"
	      height="250">
	      <el-table-column
	        fixed
	        prop="date"
	        label="日期"
	        width="150">
	      </el-table-column>
	      <el-table-column
	        prop="name"
	        label="姓名"
	        width="120">
			<template>
				
			</template>
	      </el-table-column>
	      <el-table-column
	        prop="province"
	        label="省份"
	        width="120">
	      </el-table-column>
	      <el-table-column
	        prop="city"
	        label="市区"
	        width="320">
	      </el-table-column>
	      <el-table-column
	        prop="address"
	        label="地址"
	        width="600">
	      </el-table-column>
	      <el-table-column
	        prop="zip"
	        label="邮编"
	        width="120">
	      </el-table-column>
	    </el-table>
    </div>
    <script>
      const App = {
        data() {
          return {
            message: "Hello Element Plus",
			tableData: [{
			          date: '2016-05-03',
			          name: '王小虎',
			          province: '上海',
			          city: '普陀区',
			          address: '上海市普陀区金沙江路 1518 弄',
			          zip: 200333
			        }, {
			          date: '2016-05-02',
			          name: '王小虎',
			          province: '上海',
			          city: '普陀区',
			          address: '上海市普陀区金沙江路 1518 弄',
			          zip: 200333
			        }, {
			          date: '2016-05-04',
			          name: '王小虎',
			          province: '上海',
			          city: '普陀区',
			          address: '上海市普陀区金沙江路 1518 弄',
			          zip: 200333
			        }, {
			          date: '2016-05-01',
			          name: '王小虎',
			          province: '上海',
			          city: '普陀区',
			          address: '上海市普陀区金沙江路 1518 弄',
			          zip: 200333
			        }, {
			          date: '2016-05-08',
			          name: '王小虎',
			          province: '上海',
			          city: '普陀区',
			          address: '上海市普陀区金沙江路 1518 弄',
			          zip: 200333
			        }, {
			          date: '2016-05-06',
			          name: '王小虎',
			          province: '上海',
			          city: '普陀区',
			          address: '上海市普陀区金沙江路 1518 弄',
			          zip: 200333
			        }, {
			          date: '2016-05-07',
			          name: '王小虎',
			          province: '上海',
			          city: '普陀区',
			          address: '上海市普陀区金沙江路 1518 弄',
			          zip: 200333
			        }]
          };
        },
		methods:{
			ga(e){
				console.log(e)
				return 1
			},
			get1(f){
				console.log(2)
				return 2
				
			}
			
		},
		watch:{
			
			tableData(val,oldVal){
				console.log(val,oldVal)
			}
		}
      };
      const app = Vue.createApp(App);
      app.use(ElementPlus);
      app.mount("#app");
    </script>
  </body>
</html>